<template>
  <div class="bg">
    <img :src="img" alt="">
    <div class="container" @click="upload">
      浏览
    </div>
    <div class="container" @click="getImage">
      show
    </div>

    <input ref="input" type="file" class="input" />
  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { useSt2ore } from "../utils/indexDBHelper/storage"
import obj from "../utils/indexDBHelper/initObjInfo"

const { wallpaper } = useStore(obj.dbFlag)

function upload() {
  input.value.click()
}

const getImg = (item = `../utils/65204496_p0.png`) => new URL(item, import.meta.url).href
const getURL = (blob) => window.URL.createObjectURL(blob)

const input = ref(null)
const img = ref(getImg())


const testModel = wallpaper.createModel({
  id: new Date().valueOf(),
  img: img.value
})

// 上传
function uploadImg() {
  let t1 = window.performance.now()

  testModel.id = new Date().valueOf()
  testModel.img = input.value.files[0]

  console.log('\n -- 准备添加对象 --：', t1)
  testModel.add().then(res => {
    let t2 = window.performance.now()
    console.log('添加成功！', res, '用时：', t2 - t1, '\n')

    window.sessionStorage.setItem("_id", res)

    getImage()
  })
}
// 获取
function getImage() {

  let _id = window.sessionStorage.getItem("_id")

  if (_id) {
    console.log(_id);
    testModel.id = Number(_id)

    testModel.load().then(res => {
      console.log(res);
      img.value = getImg(getURL(res.img))
    })
  }
}



onMounted(async () => {


  getImage()



  input.value.addEventListener("change", uploadImg)

})





</script>


<style scoped>
.container {
  width: 100px;
  height: 50px;
  border-radius: 10px;
  line-height: 50px;
  background-color: azure;
  color: black;
}

.input {
  display: none;
}

.bg {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.bg img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
</style>
